<template lang="pug">
  session-layout
    .login-base
      .title 登录
      el-form(:model='formData', @submit.native.prevent="handleSignIn")
        el-form-item(prop='userName', :rules="{required: true, message: '必填', trigger: 'blur'}")
          el-input(v-model='formData.userName', placeholder='邮箱')
        el-form-item(prop='psw', :rules="{required: true, message: '必填', trigger: 'blur'}")
          el-input(v-model='formData.psw', type='password', placeholder='密码')
        el-form-item
          el-button(type='primary', native-type="submit", :loading='submiting') 登录
</template>

<script>
import SessionLayout from '../components/SessionLayout.vue'
import CurrentUser from '../store/CurrentUser'
import {SignIn} from '../services/session'

export default {
  components: {
    SessionLayout
  },
  data () {
    return {
      submiting: false,
      formData: {
        userName: 'amanager',
        psw: '1234'
      }
    }
  },
  methods: {
    handleSignIn () {
      SignIn(this.formData).then((res) => {
        if (res.state === 200) {
          CurrentUser.set(res.user)
          this.$router.push({name: 'Home'})
        }
      }, (err) => {
        this.$message.error(err.stateName)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.login-base {
  background: #FFFFFF;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0px 0px 4px 0px rgba($color: #000000, $alpha: 0.2);
  width: 100%;
  max-width: 400px;

  .title {
    padding: 15px 0px;
    font-size: 24px;
  }
}
</style>
